<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" href="../css/jquery/redmond.css" type="text/css" media="all" />
		<link rel="stylesheet" href="../css/demo_table_jui.css" type="text/css" media="all" />
		<style>
			body{font-family:Verdana; font-size: 10px;}
			#example td{padding:0px;}
			.small{height:12px; overflow-y:auto; cursor:pointer}
		</style>
		<script src="../js/jquery.js" type="text/javascript"></script>
		<script src="../js/jquery_ui.js" type="text/javascript"></script>
		<script type="text/javascript" language="javascript" src="../js/jquery_dataTables.js"></script>
		<script type="text/javascript" charset="utf-8">
			var last_id=0;
			var oTable;
			var actions;
			$(document).ready(function() {
				oTable = $('#example').dataTable( {
					"bProcessing": false,
					"bServerSide": false,
					"sPaginationType": "full_numbers",
					"aaSorting": [[ 3, "desc" ]],
					"aoColumns": [
						null,
						{ "bSearchable": false, "bVisible":    false },
						null, 
						{ "bSearchable": false, "bVisible":    false }, 
						null,
						null,
						null,
						null,
						null,
						null
					],
					"aoColumnDefs": [
						{
							"fnRender": function ( oObj ) {
								var ret="";
								if(oObj.aData[0][0])ret+="<img src='log_images/"+oObj.aData[0][0]+"' title='"+oObj.aData[1]+"'/><span style='display:none'>"+oObj.aData[1]+"</span>";
								else{
									ret+="<span style='display:none'>"+oObj.aData[1]+"</span>";
								}
								if(oObj.aData[0][1])ret+="<img src='log_images/"+oObj.aData[0][1][1]+"' title='"+oObj.aData[0][1][0]+"' />";
								return ret;
							},
							"sClass": "center",
							"aTargets": [ 0 ]
						},
						{
							"fnRender": function ( oObj ) {
								var ret="<img src='log_images/"+oObj.aData[2][1]+"' title='"+oObj.aData[2][0]+" "+actions[oObj.aData[2][0]][2]+"'/><span style='display:none'>"+oObj.aData[2][0]+"</span>";
								return ret;
							},
							"sClass": "center",
							"aTargets": [ 2 ]
						},
						{ "sClass": "center", "aTargets": [ 6 ] },
						{ "sClass": "center", "aTargets": [ 8 ] }
					],
					"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
						$(nRow).removeClass('gradeC');
						var newClassName='gradeA';
						if(aData[1]*1){
							
							switch(aData[1]*1){
								case 2: newClassName='gradeX'; break;
								default: newClassName='gradeC'; break;
							}
						}
						$(nRow).addClass(newClassName);
						return nRow;
					},
					"sAjaxSource": "log.php",
					"fnServerData": function ( sSource, aoData, fnCallback ) {
						$.getJSON( sSource, aoData, function (json) { 
							last_id=json.last;
							$(json.aaData).each(function(){this[7]=parceDescriptions(this[7])});
							fnCallback(json);
							setInterval(jsonUpdateFunction,10000);
						} );
					}
				} );
				var jsonUpdateFunction=function(){
					$.getJSON( oTable.dataTableSettings[0].sAjaxSource, {last:last_id}, function (json) { 
						last_id=json.last;
						$(json.aaData).each(function(){
							this[7]=parceDescriptions(this[7]);
							$('#example').dataTable().fnAddData(this);
						});
					} );
				}
				var parceDescriptions=function(str){
					var ret=[];
					var c=0;
					$(str).each(function(i,val){
						for(var k in val){
							c++;
							ret.push("<b>"+k+"</b>:"+val[k]);
							if(k=='description')c=5;
						}
					});
					return "<div"+(c>1?" class='small' onclick='$(this).toggleClass(\"small\")'":"")+" >"+ret.join('<br>')+"</div>";
				}
				//
				$.getJSON( 'log.php',{lists:1}, function (json) { 
					var counter=0;
					$(json.modes).each(function(){
						$('#el_0').append('<option value="'+counter+'">'+counter+' '+this+"</option>");
						counter++;
					});
					$(json.models).each(function(){
						$('#el_5').append('<option value="'+this+'">'+this+"</option>");
					});	
					actions=json.actions;
					$(json.actions).each(function(){
						for(k in this)$('#el_2').append('<option value="'+k+'">'+k+" "+this[k]+"</option>");
					});	
					$("tfoot input").keyup( function () {
						var indexP=this.id.split('_')[1]*1;
						oTable.fnFilter( this.value, indexP );
					} );
					$("tfoot select").change( function () {
						var indexP=this.id.split('_')[1]*1;
						if(this.value=='all')oTable.fnFilter("", indexP );
						else {
							oTable.fnFilter( this.value, indexP );
						}
					} );	
				} );


			} );
		</script>
	</head>
	<body id="dt_example">
			<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
	<thead>
		<tr>
			<th>#</th>
			<th>mode</th>
			<th>action</th>
			<th>log_id</th>
			<th>action_time</th>
			<th>model</th>
			<th>model_id</th>
			<th>description_object</th>
			<th>user_id</th>
			<th>session</th>
		</tr>

	</thead>
	<tbody></tbody>
	<tfoot><tr>
			<th><select id='el_0' style='width:35px'><option value="all">--</option></select></th>
			<th><input type="text" id='el_1'></th>
			<th><select id='el_2' style='width:40px'><option value="all">--</option></select></th>
			<th><input type="text" id='el_3'></th>
			<th><input type="text" id='el_4'></th>
			<th><select id='el_5'><option value="all">--</option></select></th>
			<th><input type="text" id='el_6'></th>
			<th><input type="text" id='el_7'></th>
			<th><input type="text" id='el_8'></th>
			<th><input type="text" id='el_9'></th>
		</tr>
	</tfoot>
</table>

			</div>
</body></html>